.three-ace-win-app {
  width: 100%;
  height: 100%;

  .player-number {
    margin: 10px;
  }

  .player-role {
    margin: 10px;

    .r-0 {
      color: green;
    }

    .r-1 {
      color: blue;
    }

    .r-2 {
      color: pink;
    }

    .r-3 {
      color: black;
    }

    .r-4 {
      color: #F4A460;
    }

    .r-5 {
      color: rgb(71, 20, 181);
    }

    .r-6 {
      color: gray;
    }

    .r-7 {
      color: red;
    }

    .r-8 {
      color: #8A2BE2;
    }

    .r-9 {
      color: rgb(146, 146, 7);
    }
  }

  .game-button-row {
    margin-top: 20px;

    .game-button {
      margin-right: 20px;
    }
  }

  .game-wrapper {

    .pocker-table {
      width: 1000px;
      height: 900px;

      .pocker-action-buttons {
        .pocker-action-button {
          margin-top: 20px;
          margin-right: 20px;
        }
      }

      .else-player-area {
        position: relative;
        height: 500px;

        .else-player-area-item {
          position: absolute;
          width: 300px;
          height: 260px;
          padding-bottom: 240px;
          left: 350px;
          top: 0px;
          transform-origin: center bottom;

          .pocker-cards {
            width: 300px;
            height: 240px;
            position: relative;
            display: flex;

            .pocker-card {
              position: absolute;
              top: 0px;
              left: calc(92px);
              width: 120px;
              height: 180px;
              background-color: #FFF;
              border: 1px solid #CCC;
              border-radius: 8px;
              padding: 6px 10px;
              box-sizing: border-box;
              box-shadow: 1px 1px 3px 1px #CCC;
              transition: all .1s;
              transform: rotateY(180deg);
              transform-origin: center bottom;

              &::after {
                display: block;
                content: '';
                position: absolute;
                width: 120px;
                height: 180px;
                top: 0px;
                right: 0px;
                border-radius: 8px;
                background-image: url(@/assets/ThreeAceWin/pocker-back-pocker.svg);
                background-repeat: no-repeat;
                background-size: 80% 80%;
                background-position: center center;
                background-color: #abcffd;
              }

              &:hover {
                top: -10px;
              }

              &:nth-child(1) {
                rotate: 30deg;
              }
              &:nth-child(3) {
                rotate: -30deg;
              }

              &.is-opened {
                transform: rotateY(0deg);
                &:nth-child(1) {
                  rotate: 45deg;
                }
                &:nth-child(3) {
                  rotate: -45deg;
                }
                &::after {
                  display: none;
                }
              }
            }
          }

          .player-score {
            text-align: center;
          }
        }
      }

      .common-pocker-area {
        width: 160px;
        height: 0px;
        position: relative;
        bottom: 210px;
        margin: auto;
        .pocker-card {
          position: absolute;
          top: 50px;
          left: 40px;
          width: 80px;
          height: 120px;
          background-color: #FFF;
          border: 1px solid #CCC;
          border-radius: 8px;
          padding: 6px 10px;
          box-sizing: border-box;
          box-shadow: 1px 1px 3px 1px #CCC;
          transition: all .1s;
          transform-origin: center bottom;

          &.is-common {
            animation: pocker-rotate 1s;
          }

          &::after {
            display: none;
            content: '';
            position: absolute;
            width: 80px;
            height: 120px;
            top: 0px;
            right: 0px;
            border-radius: 8px;
            background-image: url(@/assets/ThreeAceWin/pocker-back-pocker.svg);
            background-repeat: no-repeat;
            background-size: 80% 80%;
            background-position: center center;
            background-color: #abcffd;
          }

          @keyframes pocker-rotate {
            from { transform: rotateY(360deg); }
            to { transform: rotateY(0deg); z-index: 3; }
          }

          .pocker-center {
            display: flex;
            flex: 1;
            flex-direction: column;
            padding: 10px 12px;
            justify-content: space-between;

            .pocker-center-top-icon,
            .pocker-center-bottom-icon {
              width: 21px;
              height: 21px;
            }

            .pocker-center-bottom-icon {
              rotate: 180deg;
              margin-left: auto;
            }
          }

          .pocker-corner {
            display: flex;
            align-items: center;

            &.left-top {}

            &.right-bottom {
              rotate: 180deg;
            }

            .pocker-corner-icon {
              width: 11px;
              height: 11px;
              margin-right: 6px;
            }

            .pocker-number {
              font-size: 12px;
            }
          }
        }
        .current-amount, .all-pocker-amount {
          width: 160px;
          height: 160px;
          position: absolute;
          text-align: center;
        }
        .all-pocker-amount {
          top: 20px;
        }
      }

      .current-player-area {
        height: 300px;

        .player-score {
          text-align: center;
        }

        .pocker-cards {
          width: 600px;
          height: 240px;
          position: relative;
          margin: auto;
          display: flex;
          justify-content: space-around;

          .pocker-card {
            display: flex;
            flex-direction: column;
            position: relative;
            margin-right: 10px;
            width: 160px;
            height: 240px;
            background-color: #FFF;
            border: 1px solid #CCC;
            border-radius: 8px;
            box-shadow: 1px 1px 3px 1px #CCC;
            transition: all 1s ease-out;
            bottom: 0px;
            transform: rotateY(180deg);
            padding: 12px 20px;
            box-sizing: border-box;

            .pocker-center {
              padding: 30px 25px;
            }

            &::after {
              display: block;
              content: '';
              position: absolute;
              z-index: 3;
              width: 160px;
              height: 240px;
              top: 0px;
              right: 0px;
              border-radius: 8px;
              background-image: url(@/assets/ThreeAceWin/pocker-back-pocker.svg);
              background-repeat: no-repeat;
              background-size: 80% 80%;
              background-position: center center;
              background-color: #abcffd;
            }

            &.is-seen {
              transform: rotateY(-360deg);
              &::after {
                display: none;
              }
            }

            &.isPlayer {}

            &:hover {
              box-shadow: 3px 3px 4px 3px #CCC;
              bottom: 10px;
              transition: all .3s;
            }
          }
        }

        .player-action-buttons {
          display: flex;
          justify-content: center;
          margin-top: 10px;
          .player-action-button {
            margin: 0 20px;
          }
        }
      }

      .pocker-card {
        &.pocker-heart {
          color: red;
        }

        &.pocker-diamond {
          color: red;
        }

        &.pocker-spade {
          color: black;
        }

        &.pocker-club {
          color: black;
        }

        .pocker-center {
          display: flex;
          flex: 1;
          flex-direction: column;
          padding: 20px 25px;
          justify-content: space-between;

          .pocker-center-top-icon,
          .pocker-center-bottom-icon {
            width: 42px;
            height: 42px;
          }

          .pocker-center-bottom-icon {
            rotate: 180deg;
            margin-left: auto;
          }
        }

        .pocker-corner {
          display: flex;
          align-items: center;

          &.left-top {}

          &.right-bottom {
            rotate: 180deg;
          }

          .pocker-corner-icon {
            width: 22px;
            height: 22px;
            margin-right: 6px;
          }

          .pocker-number {
            font-size: 18px;
          }
        }
      }
    }

    .pocker-group {
      margin: 10px 0;
      display: flex;
    }
  }
}